<template>
    <div class="login-container">
      <div class="login-box">
        <div class="input-group">
          <label for="username">用户名：</label>
          <input id="username" type="text" v-model="userName" placeholder="请输入用户名">
        </div>
        <div class="input-group">
          <label for="password">密码：</label>
          <input id="password" type="password" v-model="password" placeholder="请输入密码">
        </div>
        <button class="login-btn" @click="login" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
        <button class="register-btn" @click="toRegister">注册</button>
      </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { useUserStore } from '@/stores/counter'

const userName = ref('')
const password = ref('')
const loading = ref(false)
const router = useRouter()
const userStore = useUserStore() 

const login = async () => {
    // 表单验证
    if (!userName.value || !password.value) {
        alert('请输入用户名和密码')
        return
    }
    
    loading.value = true
    
    try {
        // 修改为根据用户名查询单个用户接口（更高效）
        const response = await axios.get(`http://localhost:8080/MDMS0214_war/user/username/${userName.value}`)
        const user = response.data // 假设接口返回单个用户对象

        // 新增：用户锁定状态判断
        if (user.is_locked) { // is_locked为true表示已锁定
            alert('您的账号已被锁定，请联系管理员')
            return
        }

        // 密码验证
        if (user.password === password.value) {
            localStorage.setItem('isLoggedIn', 'true')
            localStorage.setItem('userName', userName.value)
            userStore.setUserId(user.user_id)
            window.dispatchEvent(new Event('loginStateChanged'))
            router.push({ name: 'Home' })
        } else {
            alert('用户名或密码错误')
        }
    } catch (error) {
        // 处理用户不存在的情况
        if (error.response?.status === 404) {
            alert('用户名不存在')
        } else {
            console.error('登录失败:', error)
            alert('登录失败，请稍后重试')
        }
    } finally {
        loading.value = false
    }
}

const toRegister = () => {
    router.push({ name: 'Register' })
}
</script>

<style scoped>
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.login-container {
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('/png/beijing.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.login-box {
    background-color: transparent;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    width: 400px;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.6s ease-out;
    transition: transform 0.3s ease;
}

.login-box:hover {
    transform: scale(1.02);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
    font-size: 16px;
}

.input-group input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #1a73e8;
    background-color: white;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
    font-weight: 600;
}

.login-btn:hover {
    background-color: #155da0;
    transform: translateY(-3px);
}

.register-btn {
    width: 100%;
    padding: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 18px;
    font-weight: 600;
    margin-top: 15px;
}

.register-btn:hover {
    background-color: #45a049;
    transform: translateY(-3px);
}
</style>